<include file="Public:header" />
<!--主体内容-->
<!--左边-->
<div class="centent_box">
    <include file="Public:left" />
    <!--右边-->
    <div class="centent_right_box">
        <div class="centent_right rightCon">
            <div class="Mtitle">
                <ul>
                    <li class="on"><span>系统设置</span></li>
                </ul>
                <div class="rightWord"><a href="{:U('Shop/index')}">分组设置</a> &gt;&gt; 添加分组</div>
            </div>
            <form id="info_form" action="{:U('Shop/increased')}" method="post" >
            <div class="con_div">
                <ul class="formList width2 list_ul list_mp">
                    <li>
                        <label>分组名称：</label>
                        <input type="text"  name="data[title]" id="title" class="inputStyle width3">
                    </li>
                    <li class="clear" id="area-sele">
                        <label>区域范围：</label>
                        <select class="selectStyle area" name="area" id="area" onclick="getArea(this)" onchange="seleArea(this)">
                            <option value="0">--请选择--</option>
                            <option value="1">深圳</option>
                        </select>

                    </li>
                    <li>
                        <label>选择店铺：</label>
                        <select class="selectStyle" id="shop" name="data[shop_id]">
                            <option value="0">--请选择--</option>
                        </select>

                    </li>
                    <li>
                        <input type="hidden" name="data[shop_title]" id="res-area">
                    </li>
                    <li>
                        <label></label>
                        <input type="submit" value="提 交" class="btnStyle">
                    </li>
                </ul>
            </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    function getArea (tar){
        var areaid = $(tar).val();
        var sele = $(tar);
        if (areaid == 0) {
            $(sele).nextAll('select').remove();
            return false;
        }
        var url = "{:U('Ajax/getArea')}", data = {areaid:areaid};
        $.post (url, data, function (response){
            var html = '';
            if (response.state == 'ok'){
                var data = response.data;
                html = '<select class="selectStyle area" name="area" onclick="getArea(this)" onchange="seleArea(this)"><option value="0">--请选择--</option>';
                $.each(data, function (i, v){
                    html += '<option value="'+v.id+'">'+v.name+'</option>';
                });
                html += '</select>';
            }
            console.log($(sele));
            $(sele).nextAll('select').remove();
            $('#area-sele').append(html);
        }, 'json');
    }
    function seleArea(tar) {
        var sele_val = $(tar).val();
        var url = "{:U('Ajax/getShopForarea')}";
        var data = {area_id:sele_val};
        $.post (url, data, function (response){
            if (response.state == 'ok'){
                var html = '';
                var data = response.data;
                $.each (data, function (i,v){
                    html += '<option value="'+v.id+'">'+v.title+'</option>';
                });
                $('#shop option[value=0]').nextAll('option').remove();
                $('#shop').append(html);
            }
        },'json');

    };
    $('#shop').change(function (){
        var title = $(this).find("option:selected").text();
        $('#res-area').val(title);
    });


</script>
<include file="Public:footer" />